/* eslint-disable react-hooks/rules-of-hooks */
import React, { useState, useEffect } from "react";
import { Modal, Tabs, message } from "antd";
import Text from "./text";
import Llm from "./llm";
import "./index.css";

const App = ({ workspaceSet, hideModal }) => {
  const [open, setOpen] = useState(false);
  const [showMessage, setShowMessage] = useState(false);
  const handleOk = () => {
    // setLoading(true);
    // setTimeout(() => {
    //   setLoading(false);
    //   setOpen(false);
    // }, 3000);
    setShowMessage(true);
    // useEffect(() => {
      // if (!showMessage) return;
      // message.error("This is an error message");
    // }, [showMessage]);
  };

  const handleCancel = () => {
    console.log("Clicked cancel button");
    setOpen(false);
    hideModal();
  };

  //切换tab
  const onChangeTab = (key) => {
    console.log(key);
  };

  useEffect(() => {
    setOpen(workspaceSet);
    console.log("Clicked cancel132456978", workspaceSet);
  }, [workspaceSet]);

  useEffect(() => {
    if (!showMessage) return;
    message.error("This is an error message");
    setShowMessage(false);
  }, [showMessage]);
  const list = [
    {
      key: "1",
      label: "聊天设置",
      children: <Llm />,
    },
    {
      key: "2",
      label: "向量数据库",
      children: <Text />,
    }
  ];
  return (
    <>
      <Modal
        className="work-space-set"
        open={open}
        title="工作区设置-默认工作区"
        onOk={handleOk}
        onCancel={handleCancel}
        centered
        width={{
          xs: '90%',
          sm: '80%',
          md: '70%',
          lg: '60%',
          xl: '50%',
          xxl: '40%',
        }}
      >
        <Tabs defaultActiveKey="1" items={list} onChange={onChangeTab} />
      </Modal>
    </>
  );
};
export default App;
